/*
 * @Description:
 * @Author: zgh
 * @Date: 2023-04-29 10:22:23
 * @FilePath: \web\jichuangwan\js\index.js
 * @LastEditTime: 2023-05-09 10:31:31
 * @LastEditors: zgh
 */
//代码高亮
hljs.highlightAll();
// 立即执行，判断本地是否保存了主题
(function () {
    let myhref = localStorage.getItem("theme");
    if (myhref != null) {
        $(".style")[0].href = myhref;
    }
})();
class main {
    constructor() {
        //隐藏按钮部分
        this.hiddenSide();
        //切换主题
        this.changeTheme();
        //搜索框
        this.mySearch();
        //打字机
        this.daziji();
        //教程
        this.theTeacher();
        //模态框隐藏
        $('.animal-model-content').click(function (e) {
            //当点击最外层元素本身才隐藏模态框
            if(e.target===$('.animal-model-content')[0]){
                $('body')[0].style.overflow = 'auto';
                $('.animal-model').attr('data-open','false');
            }
        })
        //模态框内部html按钮切换功能
        this.toggleButton();
        //模态框缩小功能
        this.modelSmall();
        //运行按钮
        let iframe = document.querySelector(".model-user-iframe iframe");
        $(".run .ant-btn").click(function () {
            //需要跨域，后置
            iframe.contentWindow.location.reload();
        });
        //iframe加载动画
        iframe.addEventListener("load", function () {
            // iframe加载完成后执行的代码
        });
    }
    //侧边栏收起功能
    sideIn() {
        // $('.side-button').css('visibility', 'visible');
        $(".side-button").addClass("visible");
        $(".side-button .icon").addClass("translateX-0");
    }
    //收起按钮功能
    sideOut() {
        //    $('.side-button').css('visibility', 'hidden');
        $(".side-button").removeClass("visible");
        $(".side-button .icon").removeClass("translateX-0");
    }

    //隐藏功能
    hiddenSide() {
        let $mainSide = $(".main-side");
        $mainSide.mousemove(this.sideIn).mouseout(this.sideOut); //注册隐藏按钮显示隐藏事件
        //点击按钮隐藏
        $(".side-button").click(() => {
            $mainSide.toggleClass("pingyi");
            $(".side-button .icon").toggleClass("xuanzhuan");
            $(".side-strip").toggleClass("visible");
            $("body").toggleClass("shouqi");
            //点击按钮禁用事件
            if ($(".side-button .icon").hasClass("xuanzhuan")) {
                $mainSide.off("mouseout", this.sideOut).off("mousemove", this.sideIn);
            } else {
                $mainSide.on("mouseout", this.sideOut).on("mousemove", this.sideIn);
            }
        });
        //点击柱子展开
        $(".side-strip").click(() => {
            $mainSide.removeClass("pingyi");
            $(".side-button .icon").removeClass("xuanzhuan");
            $(".side-strip").removeClass("visible");
            $("body").removeClass("shouqi");
            // 启用事件
            $mainSide.on("mouseout", this.sideOut).on("mousemove", this.sideIn);
        });
    }

    //切换主题
    changeTheme() {
        $(".mytheme-button").click(toggleStyle);
        function toggleStyle() {
            let style = $(".style");
            if (style[0].href.endsWith("index.css")) {
                localStorage.setItem("theme", "./css/index01.css");
                style[0].href = "./css/index01.css";
            } else {
                localStorage.setItem("theme", "./css/index.css");
                style[0].href = "./css/index.css";
            }
        }
    }

    //搜索框事件
    mySearch() {
        //搜索框聚焦显示分类
        $(".search-label input")
            .focus(function () {
                $(".xiala").addClass("visible");
                $(".search-form").addClass("shadow");
            })
            .blur(function () {
                $(".xiala").removeClass("visible");
                $(".search-form").removeClass("shadow");
            });

        //下拉分类委托事件
        document
            .querySelector(".xiala")
            .addEventListener("click", function (e) {
                if (e.target.tagName === "A") {
                }
            });
    }

    //打字机动画
    daziji() {
        const ps = $(".css-show p");
        let yanchi = 0;
        ps.each((i, p) => {
            const w = p.outerText.length; //获取包含所有子元素的文本长度
            // 设置宽度，单位为等宽字体字长
            p.style.width = `${w}ch`;
            //设置动画
            p.style.animation = `dazi ${
                w * 0.2
            }s steps(${w}) backwards, caret .5s step-end infinite`;
            //设置延迟
            p.style.animationDelay = `${yanchi}s`;
            yanchi += w * 0.3 + 1;
            //清除动画，不然光标一直闪
            if (i < ps.length - 1) {
                //保留最后一个
                setTimeout(() => {
                    p.style.animation = "";
                }, yanchi * 1000);
            }
        });
    }

    //教程部分
    theTeacher() {
        // 教程，折叠内容块的排他功能
        const details = document.querySelectorAll(".editor details");
        const qietu = document.querySelectorAll(".qietu li");
        document
            .querySelector(".editor")
            .addEventListener("click", function (e) {
                // 阻止summary的默认事件
                event.preventDefault();
                //如果触发事件的是summary，改成detail
                const detail =
                    e.target.tagName === "SUMMARY"
                        ? e.target.parentNode
                        : e.target;
                if (detail.tagName === "DETAILS") {
                    console.log(detail);
                    details.forEach((v) => {
                        // 折叠内容块的排他
                        v.open = false;
                    });
                    qietu.forEach((v) => {
                        // 对应图片的排他
                        v.classList.remove("active");
                    });
                    detail.open = true;
                    // 根据索引展示图片
                    // details是伪数组，所以必须用这种方法
                    const index = Array.prototype.indexOf.call(details, detail);
                    qietu[index].classList.add("active");
                }
            });
    }

    //模态框内部html按钮切换功能
    toggleButton() {
        let codeButton = document.querySelectorAll(
            ".model-show .coder-nav button"
        );
        let codeBox = document.querySelectorAll(
            ".model-show .show-iframe .box"
        );
        //点击按钮隐藏
        codeButton.forEach((button, index) => {
            button.addEventListener("click", function () {
                this.classList.toggle("active");
                codeBox[index].classList.toggle("active");
                //按钮选中则站位框选中，反之亦然，不能用toggle
                if (this.classList.contains("active")) {
                    $(".code-footer-zhanwei").addClass("active");
                } else {
                    $(".code-footer-zhanwei").removeClass("active");
                }
                // 排他
                codeButton.forEach((btn, i) => {
                    if (i !== index) btn.classList.remove("active");
                });
                codeBox.forEach((box, i) => {
                    if (i !== index) box.classList.remove("active");
                });
            });
        });
    }

    //模态框缩小功能
    modelSmall() {
        let antBtn = document.querySelectorAll(".code-footer .zoom button");
        let iframe = document.querySelector(".model-user-iframe");
        //点击按钮隐藏
        antBtn.forEach((button, index) => {
            button.addEventListener("click", function () {
                console.log(iframe);
                this.classList.toggle("active");
                switch (index) {
                    case 0:
                        iframe.className = "model-user-iframe zoom-1";
                        break;
                    case 1:
                        iframe.className = "model-user-iframe zoom-05";
                        break;
                    case 2:
                        iframe.className = "model-user-iframe zoom-025";
                        break;
                }
                // 排他
                antBtn.forEach((btn, i) => {
                    if (i !== index) btn.classList.remove("active");
                });
            });
        });
    }
}

new main();

//模态框显示
function showModel(){
    $('.animal-model').attr('data-open','true');
    $('body')[0].style.overflow = 'hidden';
}